<script setup>
//引入依赖
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import {XYZ} from 'ol/source';
import View from 'ol/View';
import { ref ,onMounted} from "vue";

const map = ref(null);

const initMap = () => {
  map.value = new Map({
    target:'map',
    layers: [
      new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          // 是否横向重复
          wrapX: false
        })
      })
    ],
    view: new View({
      center: [12958752, 4848452],
      projection: 'EPSG:3857',
      zoom: 8,
      minZoom: 1
    }),
  })
}

onMounted(initMap)
</script>

<template>
  <!--地图挂载dom-->
  <div id="map">
  </div>
</template>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>